<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>brand_list</title>
    <!-- Bootstrap -->
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/custom/css/item_list.css}" rel="stylesheet">

</head>

<body>
<div class="container">
    <div class="text-center caption">
        <h2>品牌管理</h2>
        <div class="controlBtn">
            <button class="btn btn-default" type="button" id="backBtn">返回</button>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover table-condensed">
            <thead>
            <th>序号</th>
            <th>品牌名称</th>
            <th>操作</th>
            </thead>
            <tr th:each="b : ${brandList}">
                <td class="text-center" th:name="${b.id}" th:text="${b.id}"></td>
                <td class="text-center" th:name="${b.brandName}"><input type="text" class="form-control text-center" th:value="${b.brandName}"/></td>
                <td class="text-center">
                    <button class="btn btn-default btn-xs editBtn" type="button" th:data-id="${b.id}">修改</button>
                    <button class="btn btn-default btn-xs delBtn" type="button" th:data-id="${b.id}">删除</button>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="text" class="form-control" id="brandName"></td>
                <td>
                    <button class="btn btn-default btn-xs" type="button" id="addBrand" data-toggle="modal"
                            data-target="#myModal">新增
                    </button>
                </td>
            </tr>
        </table>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p id="message"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/bootstrap/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

<script type="text/javascript">
    $(function () {
        var needReload = false;
        $('#backBtn').click(function () {
            window.location.href = "/items";
        })
        // 新增
        $('#addBrand').click(function () {
            var vBrandName = $('#brandName').val();
            if (vBrandName == null || vBrandName == '') {
                needReload = false;
                $("#message").html("品牌名称不能为空!")
                $('#myModal').modal('show');
                return false;
            }
            var param = {
                brandName: vBrandName
            }
            $.ajax({
                type: "post",
                url: "/brand/add",
                contentType: "application/json",
                dataType: 'text',
                data: JSON.stringify(param),
                cache: false,
                success: function (result) {
                    needReload = true;
                    $("#message").html(result);
                    $('#myModal').modal('show');
                }
            });
        });
        // 修改
        $('.editBtn').click(function () {

//            console.log($(this).data("id"));
        })
        // 删除
        $('.delBtn').click(function () {
            $.ajax({
                url: '/brand/delete/id/' + $(this).data('id'),
                dataType: 'text',
                success: function (result) {
                    needReload = true;
                    $("#message").html(result);
                    $('#myModal').modal('show');
                }
            });
        })
        $('#myModal').on('hidden.bs.modal', function (e) {
            if (needReload) {
                location.reload();
            }
        })
    })
</script>
</body>
</html>